<template>
	<div class="login-form-wrapper">
		<div class="login-form-title">登录</div>
		<div class="login-form-sub-title">console login</div>
		<el-form ref="loginFormRef" :model="loginForm" :rules="rules">
			<el-form-item prop="username">
				<el-input v-model="loginForm.username" placeholder="请输入用户名" />
			</el-form-item>
			<el-form-item prop="password">
				<el-input
					v-model="loginForm.password"
					type="password"
					autocomplete="off"
					placeholder="请输入密码"
				/>
			</el-form-item>
			<el-form-item>
				<el-button
					type="primary"
					style="width: 100%"
					@click="submitLoginForm(loginFormRef)"
					>登录</el-button
				>
			</el-form-item>
		</el-form>
	</div>
</template>

<script lang="ts" setup>
import type { FormInstance, FormRules } from 'element-plus'

const loginForm = reactive({
	username: '',
	password: '',
})

const loginFormRef = ref<FormInstance>()

const submitLoginForm = (formEl: FormInstance | undefined) => {
	if (!formEl) return
	formEl.validate((valid) => {
		if (valid) {
			console.log('submit!')
		} else {
			console.log('error submit!')
			return false
		}
	})
}

const rules = reactive<FormRules<typeof loginForm>>({
	username: [{ required: true, trigger: 'blur', message: '用户名不能为空' }],
	password: [{ required: true, trigger: 'blur', message: '密码不能为空' }],
})
</script>

<style lang="less" scoped>
.login-form {
	&-wrapper {
		width: 320px;
	}

	&-title {
		color: var(--el-text-color-primary);
		font-weight: 500;
		font-size: 24px;
		line-height: 32px;
	}

	&-sub-title {
		color: var(--el-text-color-regular);
		font-size: 16px;
		line-height: 24px;
		margin-bottom: 40px;
	}
}
</style>
